إضافة زر إجراء عائم

تجربة طريقة "الكتابة"

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي يُنصح باستخدامها على Android. تعرَّف على كيفية إضافة مكوّنات في Compose.

زر الإجراء العائم →

زر الإجراء العائم (FAB) هو زر دائري يؤدي إلى تنفيذ الإجراء الأساسي في واجهة مستخدم تطبيقك. توضّح لك هذه الصفحة كيفية إضافة زر الإجراء العائم إلى التصميم وتخصيص بعض مظاهره والاستجابة للنقرات على الزر.

لمعرفة المزيد حول كيفية تصميم زر إجراء عائم في تطبيقك وفقًا لإرشادات Material Design، يمكنك أيضًا الاطّلاع على الأزرار: زر الإجراء العائم.

الشكل 1. زر إجراء عائم

إضافة زر الإجراء العائم إلى التصميم

يوضّح الرمز التالي كيفية ظهور FloatingActionButton في ملف التصميم:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

يتم تلقائيًا تلوين زر الإجراء العائم باستخدام السمة colorAccent، والتي يمكنك تخصيصها باستخدام لوحة ألوان المظهر.

يمكنك ضبط خصائص زر الإجراء العائم الأخرى باستخدام سمات XML أو الطرق المناسبة، مثل ما يلي:

• حجم زر الإجراء العائم، باستخدام السمة app:fabSize أو الطريقة setSize()
• لون التموج في الزر العائم، باستخدام السمة app:rippleColor أو الطريقة setRippleColor()
• رمز زر الإجراء العائم، باستخدام السمة android:src أو الطريقة setImageDrawable()

الردّ على نقرات الأزرار

يمكنك بعد ذلك تطبيق View.OnClickListener للتعامل مع نقرات زر الإجراء العائم. على سبيل المثال، يعرض الرمز التالي Snackbar عندما ينقر المستخدم على زر الإجراء العائم:

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

لمزيد من المعلومات حول إمكانات الزر العائم، يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بـ FloatingActionButton.